<template>
  <div class="container">
    <div class="empty"
         v-if="!shopList||shopList.length==0">
      <img src="https://img.ameimeika.com/h5_images/mp_images/mp_3.0/search/nocar.png"
           v-if="ImgBaseUrl"
           alt
           mode="widthFix"
           class="img" />
      <div class="msg">购物车空空如也～</div>
      <div class="btn"
           @click="to_mall()">去逛逛</div>
    </div>
    <p class="total"
       v-if="shopList.length > 0">
      <!-- 共计<span class="totalNum">{{shopList.length}}</span> 件商品 -->
      <span class="editBtn"
            @click="editBtn(isFinshed)"
            v-text="text"></span>
    </p>
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}"
                 class="scroll_view">
      <div class="mall_main">
        <div class="mall"
             v-for="(item,index) in shopList"
             :key="index"
             :class="{'padding_bottom':index == shopList.length -1}">
          <div class="left"
               v-if="!isFinshed">
            <!-- <input
            type="radio"
            class="radio"
            :key="index+1"
            @click="selected(item)"
            :checked="item.checked && item.is_del == 0"
            style="'background':'#fff','color':'#444'"
            :disabled="item.is_del == 1 || item.is_del == 2"
            color="#ff383e"
            />-->
            <div class="radio"
                 :class="item.checked && item.is_del == 0?'active':''"
                 @click="item.is_del == 1 || item.is_del == 2?'':selected(item)"></div>
          </div>
          <div class="left"
               v-if="isFinshed">
            <!-- <input
            type="radio"
            class="radio"
            :key="index+1"
            @click="selected(item)"
            :checked="item.checked"
            style="'background':'#fff','color':'#444'"
            color="#ff383e"
            />-->
            <div class="radio"
                 :class="item.checked?'active':''"
                 @click="selected(item)"></div>
          </div>
          <div class="right">
            <div class="imgbox"
                 @click="shop_det(item)"
                 :class="item.is_del==1?'filterClass':''">
              <img :src="imgUrl+item.images"
                   alt
                   class="mall_img" />
              <div class="greay_bg"
                   v-if="item.is_del ==1 || item.is_del ==2">
                <div v-if="item.is_del ==1"
                     class="mall_status">已下架</div>
                <div v-if="item.is_del ==2"
                     class="mall_status">库存不足</div>
              </div>
            </div>
            <div class="content">
              <div class="mall_box">
                <div class="mall_name">
                  <div v-if="item.cross_border == 1"
                       class="icon"></div>
                  {{item.title}}
                </div>
                <!-- <div class="guige_box">heise</div> -->
                <!-- <div class="plus" v-if="item.plus_title&&item.plus_title!=''">{{item.plus_title}}</div> -->
                <div class="mall_specs">{{item.spec_stem}}</div>
              </div>
              <div class="mall_price clearfix">
                <div class="pay_type">
                  <p class="money"
                     v-if="item.price != null">
                    <span class="money_cent"
                          v-if="(item.silver<=0||(item.price>0&&item.price!=item.silver))&&(item.gold<=0||(item.price>0&&item.price!=item.gold))">￥</span>
                    <block v-if="(item.silver<=0||(item.price>0&&item.price!=item.silver))&&(item.gold<=0||(item.price>0&&item.price!=item.gold))">{{item.price}}</block>
                  </p>
                  <p class="money"
                     v-if="item.price == null">
                    <span class="money_cent">￥</span>
                    0.00
                  </p>
                  <span class="jyb_details"
                        v-if="item.gold>0||item.silver>0">
                    <span class="jyb_fonts"
                          v-if="item.price>0&&item.price!=(item.silver||item.gold)"></span>
                    <span :class="item.gold>0?'jb':(item.silver>0?'yb':'')">{{item.gold>0?item.gold:(item.silver>0?item.silver:'')}}</span>
                    <span :class="item.gold>0?'jb_icon':(item.silver>0?'yb_icon':'')"></span>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="count"
               v-if="item.is_del ==0">
            <span class="box box2"
                  :class="item.good_num>1&&item.isDelet?'box2_active':''"
                  @tap="cart_fix(item,2)"></span>
            <span class="box box1">{{item.good_num}}</span>
            <span class="box box3"
                  :class="!item.isDelet?'box3_active':''"
                  @tap="cart_fix(item,1)"></span>
          </div>
          <div class="count n_count"
               v-if="item.is_del ==1 || item.is_del ==2">
            <span class="box box2"
                  :class="item.good_num>1&&item.isDelet?'box2_active':''"></span>
            <span class="box box1">{{item.good_num}}</span>
            <span class="box box3"
                  :class="!item.isDelet?'box3_active':''"></span>
          </div>
        </div>
      </div>
      <!-- <div class="zhanwei"></div> -->
      <!-- <div class="hot">
          <div class="title">

          </div>
      </div>-->
      <!-- 商品列表 -->
      <div class="goods-list"
           v-if="!isFinshed">
        <div class="title">
          <span class="line"></span>
          <span class="fonts">热门推荐</span>
          <span class="line"></span>
        </div>
        <hotlist :mall_List="mallList"></hotlist>
        <div class="daodi"
             v-if="isbottom&&mallList[0]">因为甄选，所以珍稀</div>
      </div>
    </scroll-view>

    <div class="bottom"
         v-if="shopList.length > 0">
      <div class="bottom_item"
           :class="isFinshed?'isFinshed':''">
        <!-- <input
          type="radio"
          class="totalCheck"
          @click="checkAll(allCheck)"
          :checked="!allCheck"
          color="#ff383e"
        />-->
        <div class="radio_box">
          <div class="radio"
               :class="!allCheck?'active':''"
               @click="checkAll(allCheck)"></div>全选
        </div>
        <div class="total_bottom"
             v-if="!isFinshed">
          <!-- 合计:
          <span class="money_cent">￥</span>-->
          <span class="money">{{totalPrice}}元</span>
          <span class="jb_money">{{totalGold}}金币</span>
          <span class="yb_money">{{totalSilver}}银币</span>
        </div>
        <button class="calculate"
                v-if="!isFinshed"
                @click="submitOrder"
                :disabled="isDisabled">
          <span class="calculate_con">结算({{shop_fix_num}})</span>
        </button>
        <div class="btn_box">
          <div class="favorites"
               v-if="isFinshed"
               @click="toFavorites">移入收藏夹</div>
          <div class="del"
               v-if="isFinshed"
               @click="delmall"
               :disabled="del_Disabled">删除</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import hotlist from "@/components/shop_list/hot_list";
export default {
  components: {
    hotlist
  },
  data () {
    return {
      imgUrl: common.image_response,
      ImgBaseUrl: common.image_resource,
      pageNum: 1,
      allCheck: true,
      shopList: [],
      isChecked: true,
      text: "编辑",
      isFinshed: false,
      totalPrice: 0,
      totalGold: 0,
      totalSilver: 0,
      totalCent: 0,
      isHidden: false,
      isDisabled: false,
      good_num: "",
      checked_array: [],
      shop_fix_num: 0,
      mark: 0,
      status: "", //判断是否为支付后跳过来,
      flag: false,
      del_Disabled: false,
      shop_array: "",
      is_nothing: false,
      mallList: [],
      num: 1,
      isbottom: false,
      alpha: 0,
      s_show: false
    };
  },
  onLoad (options) {
    this.allCheck = true;
    this.isHidden = false;
    this.flag = false;
    this.pageNum = 1;
    this.totalCent = 0;
    this.totalPrice = 0;
    this.totalGold = 0;
    this.totalSilver = 0;
    this.shopList = [];
    wx.setNavigationBarTitle({
      title: "购物车"
    });
    if ((this.status = options.status)) {
      this.status = options.status;
    }
    this.getShopList();
    Object.assign(this.$data, this.$options.data());
  },
  onShow () {
    Object.assign(this.$data, this.$options.data());
    this.allCheck = true;
    this.totalPrice = 0;
    this.totalCent = 0;
    this.totalGold = 0;
    this.totalSilver = 0;
    this.getShopList();
    this.getMall();
  },
  methods: {
    //商品列表
    getMall () {
      common.fly_post("api/v4_5/shop_cart/recommend", {}, response => {
        let res = response.data;
        if (res.status_code == 0) {
          this.mallList = res.data;
        }
      });
    },
    //上拉加载
    pullrefresh (e) {
      this.num++;
      this.getMall(this.num);
    },
    //滚动事件
    scroll (e) {
      let page_scroll = e.mp.detail.scrollTop;
      this.alpha = page_scroll / 200 > 1 ? 1 : page_scroll / 200;
      if (page_scroll > 70) {
        this.s_show = true;
      } else if (page_scroll <= 70) {
        this.s_show = false;
      }
    },
    //购物车列表
    getShopList () {
      if (this.flag) {
        return false;
      }
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_5/shop_cards/index",
        {
          page: this.pageNum,
          pageSize: 1000
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            this.mall_num = res.data.total;
            res.data.data.forEach(item => {
              item.isDelet = false;
              item.price =
                item.gold > 0
                  ? parseFloat(
                    (item.price * 100 - item.gold * 100) / 100
                  ).toFixed(2)
                  : item.silver > 0
                    ? parseFloat(
                      (item.price * 100 - item.silver * 100) / 100
                    ).toFixed(2)
                    : item.price;
            });

            if (res.data.total == 0) {
              this.is_nothing = true;
            }
            if (res.data.data.length == 0 && this.pageNum > 1) {
              common.mmk_Loading(2, "已经到最底下了");
              this.flag = true;
              return false;
            } else if (res.data.data.length > 0 && this.pageNum == 1) {
              this.shopList = res.data.data;
            } else {
              this.shopList.push(...res.data.data);
            }
          } else {
            common.mmk_Loading(1);
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    //购物车加减,加type:1，减type：2
    cart_fix (e, type) {
      common.fly_post(
        "api/v4_5/shop_cards/num_handle",
        {
          type: type,
          id: e.id,
          is_activity: e.is_activity
        },
        response => {
          let res = response.data;
          if (res.status_code == 0) {
            if (type == 1) {
              e.good_num++;
              e.isDelet = false;
            } else if (type == 2) {
              e.good_num--;
              e.isDelet = true;
            }
            if (e.price < 0) {
              e.price = 0
            }
            if (e.checked && type == 1) {
              this.shop_fix_num++;

              this.totalPrice = parseFloat(
                (this.totalPrice * 100 + e.price * 100) / 100
              ).toFixed(2);
              this.totalGold = parseFloat(
                (this.totalGold * 100 + e.gold * 100) / 100
              ).toFixed(2);
              this.totalSilver = parseFloat(
                (this.totalSilver * 100 + e.silver * 100) / 100
              ).toFixed(2);
              this.totalGold = Math.floor(this.totalGold);
              this.totalSilver = Math.floor(this.totalSilver);
              // this.totalPrice = this.totalPrice<0?'0.00':this.totalPrice
            } else if (e.checked && type == 2) {
              this.shop_fix_num--;
              this.totalPrice = parseFloat(
                (this.totalPrice * 100 - e.price * 100) / 100
              ).toFixed(2);
              this.totalGold = parseFloat(
                (this.totalGold * 100 - e.gold * 100) / 100
              ).toFixed(2);
              this.totalSilver = parseFloat(
                (this.totalSilver * 100 - e.silver * 100) / 100
              ).toFixed(2);
              this.totalGold = Math.floor(this.totalGold);
              this.totalSilver = Math.floor(this.totalSilver);
              // this.totalPrice = this.totalPrice<0?'0.00':this.totalPrice
            }
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    //单个选中
    selected (item) {
      console.log(222, item);
      if (typeof item.checked == "undefined") {
        this.$set(item, "checked", true);
        this.isHidden = true;
      } else {
        item.checked = !item.checked;
        if (item.checked) {
          this.isHidden = true;
        } else {
          this.allCheck = !item.checked;
        }
      }
      let arr = [];
      let arr1 = [];
      this.shopList.forEach(element => {
        if (element.checked == true) {
          arr1.push(element.good_num);
          arr.push(element.checked);
        }
      });
      if (arr.length == this.shopList.length) {
        this.allCheck = false; //单选框都选中，全选选中
      }
      this.checked_array = arr;
      this.fix_add(arr1);
      this.totalMoney();
    },
    //求和
    fix_add (arr) {
      let s = 0;
      arr.forEach(function (val, idx, arr) {
        s += val;
      }, 0);
      this.shop_fix_num = s;
    },
    shop_det (item) {
      if (item.is_del == 1) {
        common.mmk_Loading(2, "该商品已下架");
      } else {
        wx.navigateTo({
          url: `/pages/package_mall/goods_detail/main?goods_id=${item.good_id}`
        });
      }
    },
    //全选反选
    checkAll (e) {
      this.allCheck = !this.allCheck;
      let _this = this;
      this.shopList.forEach(function (item, index) {
        if (typeof item.checked == "undefined") {
          if (item.is_del == 0) {
            _this.$set(item, "checked", !_this.allCheck);
            _this.isHidden = !_this.allCheck;
          } else {
            _this.$set(item, "checked", !_this.allCheck);
            _this.isHidden = !_this.allCheck;
          }
        } else {
          item.checked = !_this.allCheck;
          _this.isHidden = !_this.allCheck;
        }
      });
      if (e) {
        //结算角标选中数量
        let arr1 = [];
        this.shopList.forEach(element => {
          if (element.is_del == 0) {
            arr1.push(element.good_num);
          }
        });
        this.fix_add(arr1);
      } else {
        this.shop_fix_num = 0;
      }
      this.totalMoney();
    },
    //计算总金额
    totalMoney () {
      var _this = this;
      this.totalPrice = 0;
      this.totalCent = 0;
      this.totalGold = 0;
      this.totalSilver = 0;
      this.shopList.forEach(function (item, index) {
        if (item.price < 0) {
          item.price = 0
        }
        if (item.checked) {
          _this.totalPrice = _this.addition(
            _this.totalPrice,
            item.price * item.good_num
          );
          _this.totalGold = _this.addition(
            _this.totalGold,
            item.gold * item.good_num
          );

          _this.totalSilver = _this.addition(
            _this.totalSilver,
            item.silver * item.good_num
          );
          _this.totalGold = Math.floor(_this.totalGold);
          _this.totalSilver = Math.floor(_this.totalSilver);
        }
      });
    },
    //金额计算
    addition (arg1, arg2) {
      var r1, r2, m, c;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      c = Math.abs(r1 - r2);
      m = Math.pow(10, Math.max(r1, r2));
      if (c > 0) {
        var cm = Math.pow(10, c);
        if (r1 > r2) {
          arg1 = Number(arg1.toString().replace(".", ""));
          arg2 = Number(arg2.toString().replace(".", "")) * cm;
        } else {
          arg1 = Number(arg1.toString().replace(".", "")) * cm;
          arg2 = Number(arg2.toString().replace(".", ""));
        }
      } else {
        arg1 = Number(arg1.toString().replace(".", ""));
        arg2 = Number(arg2.toString().replace(".", ""));
      }
      return parseFloat((arg1 + arg2) / m).toFixed(2);
    },
    //编辑按钮
    editBtn (e) {
      this.isFinshed = !this.isFinshed;
      if (this.isFinshed) {
        this.text = "完成";
      } else {
        this.text = "编辑";
        this.totalPrice = 0;
        this.totalCent = 0;
        this.totalGold = 0;
        this.totalSilver = 0;
        this.shop_fix_num = 0;
      }
    },
    //删除商品
    delmall () {
      let that = this;
      let array = [];
      that.shopList.forEach(function (item, index) {
        if (item.checked) {
          array.push(item.id);
        }
      });
      if (array.length <= 0) {
        common.mmk_Loading(2, "您还没有选择商品");
        return;
      }
      wx.showModal({
        title: "",
        content: "确认删除商品？",
        success: function (res) {
          if (res.confirm) {
            that.del_Disabled = true;
            let array = [];
            that.shopList.forEach(function (item, index) {
              if (item.checked) {
                array.push(item.id);
              }
            });
            common.fly_post(
              "api/v4_5/shop_good_card/delete",
              {
                ids: JSON.stringify(array)
              },
              response => {
                let res = response.data;
                if (res.status_code == 0) {
                  common.mmk_Loading(2, "删除成功");
                  setTimeout(() => {
                    that.shopList = [];
                    that.del_Disabled = false;
                    that.getShopList();
                  }, 1500);
                } else {
                  that.del_Disabled = false;
                  common.mmk_Loading(2, res.message);
                }
              }
            );
          }
        }
      });
    },
    //添加到收藏夹
    toFavorites () {
      let _this = this;
      let array = [];
      this.shopList.forEach(function (item, index) {
        if (item.checked) {
          array.push(item.good_id);
        }
      });
      setTimeout(() => {
        common.mmk_Loading(0);
        common.fly_post(
          "api/v4_5/shop_good_card/collect",
          {
            ids: JSON.stringify(array)
          },
          response => {
            common.mmk_Loading(1);
            let res = response.data;
            if (res.status_code == 0) {
              common.mmk_Loading(2, "收藏成功");
              setTimeout(() => {
                _this.shopList = [];
                _this.del_Disabled = false;
                _this.getShopList();
              }, 1500);
            } else {
              common.mmk_Loading(1);
              common.mmk_Loading(2, res.message);
            }
          }
        );
      }, 200);
    },
    //提交订单
    submitOrder () {
      let that = this;
      if (that.shop_fix_num == 0) {
        common.mmk_Loading(2, "请选择商品");
        return false;
      }
      common.mmk_Loading(1);
      that.isDisabled = true;
      let array = [];
      that.shopList.forEach(function (item, index) {
        if (item.checked && item.is_del == 0) {
          array.push(item.id);
        }
      });
      that.shop_array = JSON.stringify(array);
      that.comfirmOrder();
      that.isDisabled = false;
    },
    //判断购物车中是否有限购商品
    comfirmOrder () {
      common.fly_post(
        "api/v4_5/shop_order/affirm",
        {
          ids: this.shop_array
        },
        response => {
          let res = response.data;
          if (res.status_code == 0) {
            wx.navigateTo({
              url: `/pages/package_mall/confirm_order/main?sign=2&shop_id=${
                this.shop_array
                }`
            });
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // 跳转商城首页
    to_mall () {
      wx.reLaunch({ url: "/pages/shop_mall/main" });
    }
  }
};
</script>


<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #888;

  background: #f3f4f6;
  box-sizing: border-box;

  //   商品列表
  .goods-list {
    position: relative;
    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 24px 0 12px;
      width: 100%;
      .line {
        width: 24px;
        height: 1.5px;
        background: #e9e9e9;
      }
      .fonts {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 1);
        line-height: 20px;
        background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/icon_09.png")
          left center no-repeat;
        background-size: 10px 10px;
        padding-left: 14px;
        margin: 0 12px;
      }
    }

    .malltab {
      width: 100%;
      position: -webkit-sticky;
      position: -moz-sticky;
      position: sticky;
      top: 43px;
      z-index: 90;
    }
    .daodi {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 60px;
      text-align: center;
      font-size: 12px;

      font-weight: 400;
      color: #999990;
      line-height: 20px;
    }
  }
  .jyb_details {
    font-size: 10px;
    font-weight: 500;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: rgba(202, 202, 202, 1);
    font-family: "Medium";
    .jb_icon,
    .yb_icon {
      width: 15px;
      height: 15px;
      display: block;
      margin-left: 1px;
      margin-top: -1px;
    }
    .jb_icon {
      background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/gold_icon.png")
        0 center no-repeat;
      background-size: 15px 15px;
    }
    .yb_icon {
      background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/silver_icon.png")
        0 center no-repeat;
      background-size: 15px 15px;
    }
  }
  .jyb_fonts {
    width: 6px;
    height: 6px;
    background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/jyb_add.png")
      center center no-repeat;
    background-size: 6px 6px;
    margin: 0 2px;
    margin: 0 2px;
  }
  .jb {
    font-size: 16px;
    color: rgba(245, 208, 64, 1);
  }
  .yb {
    font-size: 16px;
    color: rgba(165, 179, 185, 1);
  }
  .radio_box {
    display: flex;
    align-items: center;
  }
  .radio {
    width: 18px;
    height: 18px;
    border: none;
    background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/radio_btn.png")
      center 0 no-repeat;
    background-size: 100% 100%;
  }
  .active {
    background: url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/radio_active.png")
      center 0 no-repeat;
    background-size: 100% 100%;
  }
  .none_shop {
    position: absolute;
    left: 38%;
    top: 45%;
  }
  .total {
    height: 18px;
    line-height: 18px;
    padding: 16px;
    position: relative;
    .editBtn {
      position: absolute;
      right: 4.5%;
      color: #444;
    }
  }
  .scroll_view {
    padding: 0 10px 140px;
    box-sizing: border-box;
    .mall {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      // align-items: center;
      margin-bottom: 10px;
      background-color: #fff;
      border-radius: 5px;
      padding: 0 12px;
      position: relative;
      .left {
        width: 18px;
        height: 18px;
        margin-right: 12px;
        margin-top: 51px;
      }
      .count {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: absolute;
        bottom: 14px;
        right: 12px;
        .box {
          display: block;
          width: 16px;
          height: 16px;
          text-align: center;
          line-height: 16px;
        }
        .box1 {
          width: 23px;
          border-left: none;
          border-right: none;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          font-size: 14px;
        }
        .box2 {
          background: rgba(247, 247, 247, 1)
            url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/del_icon.png")
            center center no-repeat;
          background-size: 100% 100%;
        }
        .box2_active {
          background: rgba(247, 247, 247, 1)
            url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/del_active.png")
            center center no-repeat;
          background-size: 100% 100%;
        }
        .box3 {
          background: rgba(247, 247, 247, 1)
            url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/add_icon.png")
            center center no-repeat;
          background-size: 100% 100%;
        }
        .box3_active {
          background: rgba(247, 247, 247, 1)
            url("https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/mp_3.1.6/mmk_3.1.6/add_active.png")
            center center no-repeat;
          background-size: 100% 100%;
        }
      }

      .n_count {
        color: #cccccc;
      }
    }
    .right {
      flex: 1;
      height: 100%;
      box-sizing: border-box;
      padding: 12px 0 44px;
      position: relative;
      display: flex;
      .imgbox {
        width: 90px;
        height: 90px;
        position: relative;
        margin-right: 10px;
        .mall_img {
          width: 90px;
          height: 90px;
          background: rgba(230, 230, 230, 1);
          border-radius: 6px;
        }
        .greay_bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 90px;
          height: 90px;
          border-radius: 6px;
          margin-right: 10px;
          vertical-align: top;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          .mall_status {
            font-size: 12px;
            color: #fff;

            z-index: 9999;
          }
        }
      }
      .filterClass {
        -ms-filter: blur(1px);
        -webkit-filter: blur(1px);
        -moz-filter: blur(1px);
        filter: blur(1px);
      }

      .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .mall_name {
          font-size: 14px;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;

          .icon {
            width: 40px;
            height: 14px;
            display: inline-block;
            background: url("https://img.ameimeika.com/h5_images/mp_images/mp_3.0/mall/kuajing.png")
              no-repeat;
            background-size: 100% 100%;
          }
        }
        .plus {
          padding: 0 5px;
          margin: 4px 0;
          line-height: 16px;
          font-size: 10px;
          font-family: "PingFangSC-Medium", "PingFang SC";
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.0.2/plus_bg%402x.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          display: inline-block;
        }
        .mall_specs {
          color: #999;
          font-size: 12px;
          margin: 6px 0 8px;
        }
        .mall_price {
          color: #444;
          width: 100%;
          .pay_type {
            display: flex;
            align-items: center;
            font-family: "Medium";
            line-height: 20px;
            .cent_dk {
              font-size: 12px;
              color: #f64665;
              opacity: 0.9;
            }
            .money {
              font-size: 16px;
              color: rgba(255, 56, 62, 1);
              display: flex;
              align-items: flex-end;
              font-weight: 500;

              .money_cent {
                font-size: 12px;
                line-height: 18px;
              }
            }
          }
        }
        // .mall_status {
        //   position: absolute;
        //   font-size: 12px;
        //   color: #fff;
        //   top: 50%;
        //   left: 50%;
        //   transform: translate(-50%, -50%);
        //   z-index: 9999;
        //   text-align: center;
        //   width: 50px;
        // }
      }
    }
  }
  .bottom {
    width: 100%;
    height: 70px;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    line-height: 50px;
    padding: 0 10px 0 22px;
    background: #fff;
    .bottom_item {
      background-color: #fff;
      border-top: solid 1px #eeeeee;
      display: flex;
      align-items: center;
      height: 100%;
      &.isFinshed {
        justify-content: space-between;
        .btn_box {
          display: flex;
          align-items: center;
        }
      }
      .radio {
        margin-right: 12px;
        margin-left: 2px;
      }
      .totalCheck {
        margin-left: 16px;
      }
      .total_bottom,
      .calculate {
        display: block;
        width: auto;

        position: absolute;
        right: 0;
        top: 0;
      }
      .total_bottom {
        padding: 7px 0;
        font-size: 12px;
        color: #666666;
        opacity: 0.9;
        right: 32%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        .money_cent {
          font-size: 12px;
          color: #ff383e;
        }
        .money {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 56, 62, 1);
          line-height: 18px;
        }
        .jb_money {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(245, 208, 64, 1);
          line-height: 18px;
          margin: 3px 0;
        }
        .yb_money {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(190, 204, 206, 1);
          line-height: 18px;
        }
      }
      .calculate {
        height: 38px;
        background: linear-gradient(
          226deg,
          rgba(254, 120, 161, 1) 0%,
          rgba(254, 123, 136, 1) 100%
        );
        border-radius: 24px;
        text-align: center;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 36px;
        right: 12px;
        top: 17px;
        padding: 0 25px;
        border: none;

        .calculate_con {
          display: inline-block;
          margin-left: 3px;
          margin-top: 2px;
          opacity: 0.8;
        }
      }
      .favorites {
        display: block;
        width: 90px;
        height: 36px;
        line-height: 36px;
        border-radius: 24px;
        border: 1px solid rgba(255, 115, 164, 1);
        text-align: center;
        color: rgba(255, 115, 164, 1);
      }
      .del {
        display: block;
        width: 78px;
        height: 38px;
        line-height: 36px;
        border-radius: 24px;
        background: linear-gradient(
          226deg,
          rgba(254, 120, 161, 1) 0%,
          rgba(254, 123, 136, 1) 100%
        );
        color: #fff;
        text-align: center;
        border: none;
        margin-left: 10px;
      }
    }
  }
}
.empty {
  .img {
    width: 129px;
    display: block;
    margin: 45px auto 12px;
  }
  .msg {
    font-size: 14px;
    font-family: "PingFangSC-Regular", "PingFangSC";
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 20px;
    text-align: center;
  }
  .btn {
    width: 88px;
    height: 32px;
    background: rgba(245, 69, 101, 1);
    border-radius: 22px;
    font-size: 16px;
    font-family: "PingFangSC-Regular", "PingFangSC";
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 32px;
    text-align: center;
    margin: 15px auto 45px;
  }
}
</style>


